import logo from '../../static/bootstrap/images/logo.svg';
import React, { useState } from 'react';
import { useNavigate, Link } from 'react-router-dom';
import '../../static/bootstrap/css/NavLink.css'
import { useLocation } from 'react-router-dom';




function UserNavBar({ address }) {
    const navigate = useNavigate();
    //高亮
    const [activeItem, setActiveItem] = useState(1);
    const location = useLocation();

    const handleClick = (item) => {
        setActiveItem(item);
    };

    return (
        <nav
            className="sidebar-wrapper"
            id="sidebar"
        >
            <div className="app-brand px-3 py-2 d-flex align-items-center">
                <Link to={`/user/${address}`}>
                    <img
                        alt="Bootstrap Gallery"
                        className="logo"
                        src={logo}
                    />
                </Link>
            </div>
            <div className="sidebarMenuScroll">
                <ul className="sidebar-menu">
                    <li className={location.pathname === `/user/${address}` ? ' current-page' : ''}>
                        <Link to={`/user/${address}`}>
                            <i className="icon-stacked_line_chart" />
                            <span className="menu-text">
                                用户首页
                            </span>
                        </Link>
                    </li>
                    <li className={location.pathname === `/user/${address}/User_GetOwnInfo` ? ' current-page' : ''}>
                        <Link to={`/user/${address}/User_GetOwnInfo`}>
                            <i className="icon-stacked_line_chart" />
                            <span className="menu-text">
                                用户信息
                            </span>
                        </Link>
                    </li>
                    <li className={location.pathname === `/user/${address}/User_JoinActivity` ? ' current-page' : ''}>
                        <Link to={`/user/${address}/User_JoinActivity`}>
                            <i className="icon-bar-chart" />
                            <span className="menu-text">
                                参加活动
                            </span>
                        </Link>
                    </li>
                    <li className={location.pathname === `/user/${address}/User_MaterialList` ? ' current-page' : ''}>
                        <Link to={`/user/${address}/User_MaterialList`}>                                    <i className="icon-filter_list" />
                            <span className="menu-text">
                                材料列表
                            </span>
                        </Link>
                    </li>
                    {/* <li>
                                <a href="agents.html">
                                    <i className="icon-sentiment_satisfied_alt" />
                                    <span className="menu-text">
                                        Agents
                                    </span>
                                </a>
                            </li> */}
                    {/* <li>
                                <a href="faq.html">
                                    <i className="icon-message-circle" />
                                    <span className="menu-text">
                                        FAQ's
                                    </span>
                                </a>
                            </li> */}
                    {/* <li className={`treeview ${isOpen ? 'active' : ''}`}>
                        <a href="#!" onClick={toggleMenu}>
                            <i className="icon-add_task" />
                            <span className="menu-text">
                                积分兑换管理
                            </span>
                        </a>
                        <ul className="treeview-menu">
                            <li>
                                <Link to={`/admin/${address}/Admin_credits/Admin_RuleList`}>                                    <i className="icon-filter_list" />
                                    积分列表
                                </Link>
                            </li>
                            <li>
                                <Link to={`/admin/${address}/Admin_credits/Admin_ExchangeRecordList`}>                                    <i className="icon-filter_list" />
                                    用户兑换记录
                                </Link>
                            </li> */}
                    {/* <li>
                                        <a href="pending-tickets.html">
                                            Pending Tickets
                                        </a>
                                    </li>
                                    <li>
                                        <a href="closed-tickets.html">
                                            Closed Tickets
                                        </a>
                                    </li>
                                    <li>
                                        <a href="solved-tickets.html">
                                            Solved Tickets
                                        </a>
                                    </li> */}
                    {/* </ul>
                    </li> */}
                    <li className={location.pathname === `/user/${address}/User_userExchangeGift` ? ' current-page' : ''}>
                        <Link to={`/user/${address}/User_userExchangeGift`}>
                            {/* <i className="icon-filter_list" /> */}
                            <i className="icon-support_agent" />
                            <span className="menu-text">
                                兑换奖品
                            </span>
                        </Link>
                    </li>
                    {/* <li>
                        <Link to={`/admin/${address}/Admin_credits/Admin_GetUserCourseInfo`}>                                    <i className="icon-filter_list" />
                            <i className="icon-bell" />
                            <span className="menu-text">
                                查询学生课程记录
                            </span>
                        </Link>
                    </li> */}
                    {/* <li>
                        <a href="subscribers.html">
                            <i className="icon-check-circle" />
                            <span className="menu-text">

                            </span>
                        </a>
                    </li> */}
                    {/* <li className={`treeview ${isOpen1 ? 'active' : ''}`}>
                        <a href="#!" onClick={toggleMenu1}>
                            <i className="icon-book-open" />
                            <span className="menu-text">
                                课程管理
                            </span>
                        </a>
                        <ul className="treeview-menu">
                            <li>
                                <Link to={`/admin/${address}/Admin_credits/Admin_CourseManage`}>                                    <i className="icon-filter_list" />
                                    课程列表
                                </Link>
                            </li>
                            <li>
                                <Link to={`/admin/${address}/Admin_credits/Admin_addMultiCourses`}>                                    <i className="icon-filter_list" />
                                    添加课程
                                </Link>
                            </li> */}
                    {/* <li>
                                        <a href="invoice.html">
                                            Invoice Details
                                        </a>
                                    </li>
                                    <li>
                                        <a href="create-invoice.html">
                                            Create Invoice
                                        </a>
                                    </li> */}
                    {/* </ul>
                    </li> */}
                    {/* <li>
                                <a href="datatables.html">
                                    <i className="icon-grid_on" />
                                    <span className="menu-text">
                                        DataTables
                                    </span>
                                </a>
                            </li>
                            <li>
                                <a href="editor.html">
                                    <i className="icon-edit" />
                                    <span className="menu-text">
                                        Editor
                                    </span>
                                </a>
                            </li>
                            <li>
                                <a href="placeholder.html">
                                    <i className="icon-align-left" />
                                    <span className="menu-text">
                                        Placeholder
                                    </span>
                                </a>
                            </li>
                            <li className="treeview">
                                <a href="#!">
                                    <i className="icon-calendar" />
                                    <span className="menu-text">
                                        Calendars
                                    </span>
                                </a>
                                <ul className="treeview-menu">
                                    <li>
                                        <a href="calendar.html">
                                            Daygrid View
                                        </a>
                                    </li>
                                    <li>
                                        <a href="calendar-external-draggable.html">
                                            External Draggable
                                        </a>
                                    </li>
                                    <li>
                                        <a href="calendar-google.html">
                                            Google Calendar
                                        </a>
                                    </li>
                                    <li>
                                        <a href="calendar-list-view.html">
                                            List View
                                        </a>
                                    </li>
                                    <li>
                                        <a href="calendar-selectable.html">
                                            Selectable
                                        </a>
                                    </li>
                                </ul>
                            </li>
                            <li className="treeview">
                                <a href="#!">
                                    <i className="icon-layers" />
                                    <span className="menu-text">
                                        UI Elements
                                    </span>
                                </a>
                                <ul className="treeview-menu">
                                    <li>
                                        <a href="accordions.html">
                                            Accordions
                                        </a>
                                    </li>
                                    <li>
                                        <a href="alerts.html">
                                            Alerts
                                        </a>
                                    </li>
                                    <li>
                                        <a href="buttons.html">
                                            Buttons
                                        </a>
                                    </li>
                                    <li>
                                        <a href="badges.html">
                                            Badges
                                        </a>
                                    </li>
                                    <li>
                                        <a href="cards.html">
                                            Cards
                                        </a>
                                    </li>
                                    <li>
                                        <a href="custom-cards.html">
                                            Custom Cards
                                        </a>
                                    </li>
                                    <li>
                                        <a href="carousel.html">
                                            Carousel
                                        </a>
                                    </li>
                                    <li>
                                        <a href="icons.html">
                                            Icons
                                        </a>
                                    </li>
                                    <li>
                                        <a href="list-items.html">
                                            List Items
                                        </a>
                                    </li>
                                    <li>
                                        <a href="modals.html">
                                            Modals
                                        </a>
                                    </li>
                                    <li>
                                        <a href="progress.html">
                                            Progress Bars
                                        </a>
                                    </li>
                                    <li>
                                        <a href="popovers.html">
                                            Popovers
                                        </a>
                                    </li>
                                    <li>
                                        <a href="tabs.html">
                                            Tabs
                                        </a>
                                    </li>
                                    <li>
                                        <a href="tooltips.html">
                                            Tooltips
                                        </a>
                                    </li>
                                    <li>
                                        <a href="typography.html">
                                            Typography
                                        </a>
                                    </li>
                                </ul>
                            </li>
                            <li className="treeview">
                                <a href="#!">
                                    <i className="icon-layout" />
                                    <span className="menu-text">
                                        Forms
                                    </span>
                                </a>
                                <ul className="treeview-menu">
                                    <li>
                                        <a href="form-inputs.html">
                                            Basic Form Inputs
                                        </a>
                                    </li>
                                    <li>
                                        <a href="form-checkbox-radio.html">
                                            Checkbox & Radio
                                        </a>
                                    </li>
                                    <li>
                                        <a href="form-file-input.html">
                                            File Input
                                        </a>
                                    </li>
                                    <li>
                                        <a href="form-validations.html">
                                            Validations
                                        </a>
                                    </li>
                                    <li>
                                        <a href="date-time-pickers.html">
                                            Date Time Pickers
                                        </a>
                                    </li>
                                    <li>
                                        <a href="form-layouts.html">
                                            Form Layouts
                                        </a>
                                    </li>
                                </ul>
                            </li>
                            <li>
                                <a href="starter-page.html">
                                    <i className="icon-padding" />
                                    <span className="menu-text">
                                        Starter Page
                                    </span>
                                </a>
                            </li>
                            <li>
                                <a href="tables.html">
                                    <i className="icon-grid" />
                                    <span className="menu-text">
                                        Tables
                                    </span>
                                </a>
                            </li>
                            <li className="treeview">
                                <a href="#!">
                                    <i className="icon-map" />
                                    <span className="menu-text">
                                        Graphs & Maps
                                    </span>
                                </a>
                                <ul className="treeview-menu">
                                    <li>
                                        <a href="apex.html">
                                            Apex
                                        </a>
                                    </li>
                                    <li>
                                        <a href="morris.html">
                                            Morris
                                        </a>
                                    </li>
                                    <li>
                                        <a href="maps.html">
                                            Maps
                                        </a>
                                    </li>
                                </ul>
                            </li>
                            <li className="treeview">
                                <a href="#!">
                                    <i className="icon-lock" />
                                    <span className="menu-text">
                                        Authentication
                                    </span>
                                </a>
                                <ul className="treeview-menu">
                                    <li>
                                        <a href="login.html">
                                            Login
                                        </a>
                                    </li>
                                    <li>
                                        <a href="signup.html">
                                            Signup
                                        </a>
                                    </li>
                                    <li>
                                        <a href="forgot-password.html">
                                            Forgot Password
                                        </a>
                                    </li>
                                    <li>
                                        <a href="page-not-found.html">
                                            Page Not Found
                                        </a>
                                    </li>
                                    <li>
                                        <a href="maintenance.html">
                                            Maintenance
                                        </a>
                                    </li>
                                </ul>
                            </li>
                            <li className="treeview">
                                <a href="#!">
                                    <i className="icon-notes" />
                                    <span className="menu-text">
                                        Multi Level
                                    </span>
                                </a>
                                <ul className="treeview-menu">
                                    <li>
                                        <a href="#!">
                                            Level One Link
                                        </a>
                                    </li>
                                    <li>
                                        <a href="#!">
                                            Level One Menu
                                            <i className="icon-arrow_forward_ios" />
                                        </a>
                                        <ul className="treeview-menu">
                                            <li>
                                                <a href="#!">
                                                    Level Two Link
                                                </a>
                                            </li>
                                            <li>
                                                <a href="#!">
                                                    Level Two Menu
                                                    <i className="icon-arrow_forward_ios" />
                                                </a>
                                                <ul className="treeview-menu">
                                                    <li>
                                                        <a href="#!">
                                                            Level Three Link
                                                        </a>
                                                    </li>
                                                    <li>
                                                        <a href="#!">
                                                            Level Three Link
                                                        </a>
                                                    </li>
                                                </ul>
                                            </li>
                                        </ul>
                                    </li>
                                    <li>
                                        <a href="#!">
                                            Level One Link
                                        </a>
                                    </li>
                                </ul>
                            </li> */}
                </ul>
            </div>
        </nav>
    );
}

export default UserNavBar;